<template>
	<view class="headNav" :style="{minHeight: statusBarHeight+'px'}">
		<uni-icons class="leftIcon" type="left" color="#333333" size="24" @click="navigateBack"></uni-icons>
		<view class="txt" v-if="!hasTitleBoxSlot">
			{{navTitle}}
		</view>
		<slot name="titleBox"></slot>
	</view>
</template>

<script>
	export default {
		name: "headNav",
		props: {
			backNum: {
				type: Number,
				default () {
					return 1
				}
			},
			navTitle: {
				type: String,
				default () {
					return ""
				}
			},
			navUrl: {
				type: String,
				default () {
					return ""
				}
			},
			statusBarHeight: {
				type: String,
				default () {
					return "44"
				}
			},
		},
		computed: {
			// 检测插槽是否被使用
			hasTitleBoxSlot() {
				return !!this.$slots.titleBox;
			},
		},
		data() {
			return {

			};
		},
		methods: {
			navigateBack() {
				if (this.navUrl=="") {
					uni.navigateBack({
						delta: this.backNum,
						fail() {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					});
				} else {
					uni.reLaunch({
						url: this.navUrl,
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headNav {
		width: 100vw;
		position: relative;
		display: flex;
		align-items: center;
		z-index: 10;
		.leftIcon {
			padding: 24upx;
			font-weight: bold;
		}
	}

	.txt {
		font-family: SourceHanSansSC, SourceHanSansSC;
		font-weight: 500;
		font-size: 38rpx;
		color: #454545;
		line-height: 55rpx;
		@include positionCenter;
	}
</style>